<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org">
<head th:include="include/adminHeader::html('质检字段配置')" ></head>

<body>
<div th:replace="include/adminNavigator::html"></div>
<div id="workingArea">
	<h1 class="label label-info">质检字段</h1>
    <br>
    <br>
    <!--配置表 -->
    <div class="listDataTableDiv">
		<table class="table table-striped table-bordered table-hover  table-condensed">
			<thead>
			 <tr class="success">			 	
			    <th>配置字段</th>
			    <th>字段类型</th>
			    <th>删除字段</th>
			 </tr>
			</thead>
			  
			<tbody>
				 <tr v-for="bean in beans ">
				   <td>{{bean.name}}</td>
				   <td>{{bean.type}}</td>
				   <td href="#nowhere"  @click="deleteBean(bean.id)">
			       	   <span class="glyphicon glyphicon-trash"></span>
			       </td>				  
			     </tr>
			</tbody>
		</table>
	</div>
    
    <div th:replace="include/adminPage::html" ></div>
    
    <div class="panel panel-warning addDiv">
        <div class="panel-heading">新增质检字段</div>
        <div class="panel-body">
            <table class="addTable">
                <tr>
                    <td>配置字段</td>
                    <td><input  @keyup.enter="add"  v-model.trim="bean.name" type="text" class="form-control"></td>
                </tr>
                
                <tr>
                	<td>字段类型</td>
                    <td> 
	                    <select @keyup.enter="add" v-model.trim="bean.type" type="text" class="form-control">
						   <option>业务主键</option>
						   <option>关联字段</option>
						   <option>质检字段</option>
						</select>
                    </td>
                </tr>
                
                <tr class="submitTR">
                    <td colspan="2" align="center">
                        <a href="#nowhere"  @click="add" class="btn btn-success">提交</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    
</div>
</body>



<script>
	var table_id = getUrlParms("tableId");
	var data4Vue = {
	    uri:'fields',
	    beans: [],
	    bean: {id:0, table_id:0, name:'',type:'',testTable:{id:'0'}},
	    pagination:{},
	    testTable:''
	};
	
	//ViewModel
	var vue = new Vue({
	    el: '#workingArea',
	    data: data4Vue,
	    //mounted　表示这个 Vue 对象加载成功了
	    mounted:function(){
	    	this.getTestTable(table_id);
	        this.list(0);
	    },
	    methods: {
	    	getTestTable:function(table_id){
                var url = "tables/"+table_id;
                axios.get(url).then(function(response) {
                    vue.testTable = response.data;
                })
            },
	        list:function(start){
                var url = "tables/" + table_id + "/" + this.uri+ "?start="+start;
                axios.get(url).then(function(response) {
                    vue.pagination = response.data;
                    vue.beans = response.data.content;
                });
            },
	        add: function () {
	            if(!checkEmpty(this.bean.name, "配置表名"))
	                return;
	            if(!checkEmpty(this.bean.type, "配置类型"))
	                return;
	            var url = this.uri;
                this.bean.testTable.id = table_id;
                axios.post(url,this.bean).then(function(response){
                    vue.list(0);
                    vue.bean = {id:0,name:'',testTable:{id:0}};
                });
	        },
	        deleteBean: function (id) {
	            if(!checkDeleteLink())
	                return;
	            var url = this.uri+"/"+id;
	            axios.delete(url).then(function(response){
	                if(0!=response.data.length){
	                    alert(response.data);
	                }
	                else{
	                    vue.list(0,table_id);
	                }
	            });
	        },
	       
	        // 翻页 定义在adminHeader.html中
	        jump: function(page){	        	
	            jump(page,vue); 
	        },
	        jumpByNumber: function(start){
	            jumpByNumber(start,vue);
	        }
	    }
	});
</script>

</html>
